<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>抖音丛林迷宫</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
            overflow-x: hidden; /* 防止水平滚动条 */
        }

        /* 文本容器样式 */
        .text-container {
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            background: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 90%; /* 宽度适应屏幕 */
            max-width: 600px; /* 最大宽度限制 */
        }

        /* 标题样式 */
        h1 {
            margin-bottom: 10px;
        }

        /* 输入框和按钮样式 */
        input[type="text"] {
            width: calc(100% - 130px); /* 输入框宽度适应屏幕，留出按钮空间 */
            padding: 10px;
            font-size: 16px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            width: 120px; /* 按钮固定宽度 */
        }

        button:hover {
            background-color: #45a049;
        }

        /* 画布样式 */
        canvas {
            border: 1px solid #000000;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%; /* 画布宽度适应屏幕 */
            max-width: 600px; /* 最大宽度限制与文本容器一致 */
            height: auto; /* 高度自适应，保持宽高比 */
        }

        /* 响应式调整 */
        @media (max-width: 600px) {
            .text-container, canvas {
                width: 100%; /* 在小屏幕上完全填充宽度 */
                margin: 10px 0; /* 减小边距 */
            }

            input[type="text"], button {
                font-size: 14px; /* 在小屏幕上减小字体大小 */
                padding: 8px; /* 减小内边距 */
            }
        }
        
        /* 文件内容显示区域样式 */
        #json_content {
            width: 100%;
            height: 100px;
            margin-top: 15px;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: vertical;
            box-sizing: border-box;
        }

        /* 结果内容显示区域样式 */
        #result_content {
            width: 100%;
            height: 200px; /* 比文件内容区域更高 */
            margin-top: 15px;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: vertical; /* 允许用户垂直调整大小 */
            box-sizing: border-box;
        }        
    </style>
</head>
<body>
    <div class="text-container">
        <h1>抖音丛林迷宫</h1>
        <p></p>
        <div>
            输入文件：<input type="file" id="input_file">
            <button id="btn_edit" onclick="openEditor()">编辑地图</button><br/>
        </div>
        
        <script type="text/javascript" src="bfsAsync.js"></script>
        <script type="text/javascript" src="clmg.js"></script>
        <!-- 文件内容展示区域 -->
        <div style="margin-top: 15px;">
            json数据内容：<br>
            <textarea id="json_content"></textarea>
        </div>
        <button id="btn_solve" onclick="btnsolve()">解决</button>
        <!-- 结果内容展示区域 -->
        <div style="margin-top: 15px;">
            结果内容：<br>
            <textarea id="result_content" readonly></textarea>
            <div style="margin-top: 10px;">
                <button id="prev_result" onclick="showPreviousResult()">&lt;</button>
                <button id="next_result" onclick="showNextResult()">&gt;</button>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="bfsAsync.js"></script>
    <script type="text/javascript" src="clmg.js"></script>
    <script>
        // 添加打开编辑器的函数
        function openEditor() {
            // 检测是否为移动设备
            const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
            
            if (isMobile) {
                // 移动设备上使用location.href直接跳转
                window.location.href = 'editor.html?return=true';
            } else {
                // 桌面端：检查编辑器窗口是否已经存在并且没有被关闭
                if (window.editorWindow && !window.editorWindow.closed) {
                    try {
                        // 激活已存在的窗口
                        window.editorWindow.focus();
                        return; // 不再执行后续代码
                    } catch (e) {
                        // 如果激活失败（可能是跨域安全限制等原因），则重新打开
                        console.log('激活已存在的编辑器窗口失败，将创建新窗口:', e);
                    }
                }
                
                // 创建新的编辑器窗口或替换已关闭的窗口
                window.editorWindow = window.open('editor.html', 'mapEditor', 'width=800,height=600');
            }
        }
        
        window.addEventListener('message', function(event) {
            // 验证消息来源
            if (event.data.type === 'mapData') {
                // 将接收到的JSON数据填充到json_content控件
                document.getElementById('json_content').value = event.data.jsonData;
                
                // 可选：如果编辑器窗口还打开着，可以关闭它
                // if (window.editorWindow && !window.editorWindow.closed) {
                //     window.editorWindow.close();
                // }
            }
        });
        document.onreadystatechange = function () {
            if (document.readyState === "interactive") {
                // 点击事件：在用户打开文件选择对话框前重置input值
                document.getElementById('input_file').addEventListener('click', function() {
                    this.value = '';
                });
                // 添加文件选择事件监听器
                document.getElementById('input_file').addEventListener('change', function(e) {
                    let file = e.target.files[0];
                    if (file) {
                        let reader = new FileReader();
                        reader.onload = function(event) {
                            // 将文件内容显示在textarea中
                            document.getElementById('json_content').value = event.target.result;
                            // 清空结果内容和索引
                            traceResults = [];
                            resultIndex = 0;
                            document.getElementById('result_content').value = '';
                        };
                        reader.readAsText(file);
                    }
                });
            }
        }
        function btnsolve()
        {
            //读取文件内容
            let jsonText = document.getElementById('json_content').value;
            if (!jsonText) {
                alert('请加载文件内容');
                return;
            }

            //构造起始节点
            let vs = new ClmgFactory(0,0,0);
            if(!vs.readFromJson(jsonText)){
                alert('json格式错误');
                return;
            }
            //构造终点节点
            let vd = new ClmgFactory(0,0,0);
            vd.CopyFrom(vs);
            vd.success();
            //bfs计算
            bfsAsync(vs,vd,function(trace) {
                traceResults = trace;
                resultIndex = 0;
                //画结果列表里的第一个节点
                showResult(resultIndex);
            });
        }
        let traceResults = [];
        // 结果列表索引
        let resultIndex = 0;

        //结果显示
        function showResult(index) {
            if(!traceResults || traceResults.length == 0){
                document.getElementById('result_content').value = '没有找到路径，请检查地图是否正确';
                return;
            }
            if(index < 0 || index >= traceResults.length){
                return;
            }

            let text = `第${index}/${(traceResults.length-1)}步:\n`;
            text += traceResults[index].dump();
            document.getElementById('result_content').value = text;
        }
        // 显示前一个结果
        function showPreviousResult() {
            if (resultIndex > 0) {
                resultIndex--;
                showResult(resultIndex);
            }
        }
        // 显示下一个结果
        function showNextResult() {
            if (resultIndex < traceResults.length - 1) {
                resultIndex++;
                showResult(resultIndex);
            }
        }
    </script>
</body>
</html>